<template>
    <!-- Add your content here -->
     <v-chip :color="color" 
             class="ma-2"
             :style="{ 'font-size': '14px', 'font-weight': 'bold' }">
        <v-icon v-if="arrow" :icon="icon" start></v-icon>
        {{  value }}
     </v-chip>
</template>
<script lang="ts" setup>

const props = defineProps({
    value: {
        type: Number,
        required: true,
    },
    arrow: {
        type: Boolean,
        default: false,
    },
    percent: {
        type: Boolean,
        default: false,
    }
});
const icon = computed(() => {
    if (props.value > 0) {
        return 'mdi-arrow-up';
    } else if (props.value < 0) {
        return 'mdi-arrow-down';
    } else {
        return 'mdi-minus';
    }
});
const value = computed(() => {
    const flag = props.value > 0 ? '+' : props.value < 0 ? '-' : '';
    console.log(11111, props.value, props.arrow, flag);
    return props.percent ? 
        `${flag}${Math.abs(props.value).toFixed(2)}%` : 
        `${flag}${Math.abs(props.value).toFixed(2)}`;
});
const color = computed(() => {
    if (props.value > 0) {
        return 'red';
    } else if (props.value < 0) {
        return 'green';
    } else {
        return 'grey';
    }
});
</script>